import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Button, Radio, Col, Modal, Table ,message} from 'antd';
import './AddServicePack.scss';
import Herder from '../../../../../component/Serve/Header/Header';
import type { ColumnsType } from 'antd/es/table';
import { getServiceProjectList ,addServiceProjectList} from '../../../../../api/Service';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
interface Props {

}
interface DataType {
    id:number,
    name:string,
    count:string,
    type:string,
    price:string,
    info:string,
}
function AddServicePack(props: Props) {
    var navigate = useNavigate();
    const { confirm } = Modal;
    const { TextArea } = Input;
    var [data,setData] = useState<DataType[]>([]);//页面表格数据
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');//表格复选
    var [project, setProject] = useState([]);//服务项目列表数据
    const [isModalOpen, setIsModalOpen] = useState(false);//弹出框
    const [addList,setAddList] = useState<DataType[]>([])//选中的服务项目数组
    //挂载期
    useEffect(() => {
        getProjectList()
    }, [])
    //获取服务项目列表数据
    var getProjectList = async () => {
        var res = await getServiceProjectList()
        setProject(res.data)
    }
    //表格
    const columns: ColumnsType<DataType> = [
        {
            title: '项目编号',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '次数',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '项目类型',
            key: 'type',
            dataIndex: 'type',
        },
        {
            title: '项目介绍',
            dataIndex: 'info',
            key: 'info',
        },
        !isModalOpen ?
            {
                title: '操作',
                key: 'action',
                render: (_, record) => (<Button danger onClick={()=>{delAddList(record)}}>删除</Button>),
            } : {}
    ];
    //点击删除页面表格中数据
    var delAddList = (record:any)=>{
        confirm({
            title: '删除确认',
            icon: <ExclamationCircleFilled />,
            content: '确定删除此项目信息吗?',
            okText:"确定",
            cancelText:"取消",
            onOk() {
                setData(data.filter((item:any)=>item!=record))
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }
    //表单验证通过
    const onFinish =async (values: any) => {
        var res = await addServiceProjectList({...values,packList:addList,packStatus:'待审核'})
        console.log(res);
        if(res.status==201){
            message.success("添加成功");
            navigate(-1)
        }
        console.log('Success:', values);
    };
    //下拉框
    const onGenderChange = (value: string) => {
        console.log(value);
    };
    //弹出框
    const showModal = () => {
        setIsModalOpen(true);
    };
    //弹出框点击确认
    const handleOk = () => {
        setData(addList)
        setIsModalOpen(false);
    };
    //弹出框关闭
    const handleCancel = () => {
        setData([])
        setIsModalOpen(false);
    };
    //表格复选事件
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setAddList(selectedRows)
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
        <div className='addservicepack'>
            <div className="main">
                <Herder txt="新增服务包" />
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    layout="inline"
                >
                    <h3>服务包信息</h3>
                    <Col span={24}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="服务包名称"
                            name="packName"
                            rules={[{ required: true, message: '请输入服务包名称' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                    </Col>

                    <Col span={8}>
                        <Form.Item name="packType" label="服务包类型" rules={[{ required: true ,message: '请选择服务包类型' }]}>
                            <Select
                                placeholder="请选择"
                                onChange={onGenderChange}
                                allowClear
                            >
                                <Select.Option value="初级包">初级包</Select.Option>
                                <Select.Option value="中级包">中级包</Select.Option>
                                <Select.Option value="高级包">高级包</Select.Option>
                                <Select.Option value="特需定制包">特需定制包</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>


                    <Col span={8}>
                        <Form.Item
                            label="订购价格"
                            name="packPrice"
                            rules={[{ required: true, message: '请输入服务包价格' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                    </Col>


                    <Col span={8}>
                        <Form.Item
                            label="服务对象"
                            name="packUser"
                            rules={[{ required: true, message: '请输入服务对象' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                    </Col>

                    <Col span={8}>
                        <Form.Item
                            label="服务包标签"
                            name="packTags"
                            rules={[{ required: true ,message: '请选择服务包标签' }]}
                        >
                            <Select
                                placeholder="请选择"
                                onChange={onGenderChange}
                                allowClear
                            >
                                <Select.Option value="慢病护理">慢病护理</Select.Option>
                                <Select.Option value="高血压">高血压</Select.Option>
                                <Select.Option value="高血糖">高血糖</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={8}>
                        <Form.Item
                            label="签约周期"
                            name="packPeriod"
                            rules={[{ required: true ,message: '请选择服务包周期'}]}
                        >
                            <Select
                                placeholder="请选择"
                                onChange={onGenderChange}
                                allowClear
                            >
                                <Select.Option value="1年">1年</Select.Option>
                                <Select.Option value="2年">2年</Select.Option>
                                <Select.Option value="3年">3年</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={8}>
                        <Form.Item
                            label="续签情况"
                            name="isContract"
                        >
                            <Radio.Group>
                                <Radio value="可续签"> 可续签 </Radio>
                                <Radio value="不可续签"> 不可续签 </Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                    <Col span={24}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="图片链接"
                            name="img"
                            rules={[{ required: true, message: '请选择服务包图片' }]}
                        >
                            <Input type='text' />
                        </Form.Item>
                    </Col>
                    <Col span={24}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="服务介绍"
                            name="packInfo"
                            rules={[{ required: true, message: '请输入服务介绍!' }]}
                        >
                            <TextArea rows={4} placeholder="请输入" />
                        </Form.Item>
                    </Col>

                    <Col span={24}></Col>
                    <h3>服务项目</h3>
                    <Col span={24} style={{ textAlign: "right" }} ><Button onClick={showModal} type="primary" style={{ marginBottom: '10px' }}>添加服务项目</Button></Col>
                    <Col span={24}>
                        <Table columns={columns} dataSource={data} />
                    </Col>


                    <Col span={24}></Col>
                    <h3>服务详情字段</h3>
                    <Col span={24}></Col>


                    <Col span={10}>
                        <Form.Item
                            label="病情描述"
                            name="disease"
                            rules={[{ required: true, message: '请输入病情描述' }]}
                        >
                            <TextArea rows={4} placeholder="请输入" />
                        </Form.Item>
                    </Col>
                    <Col span={24}></Col>
                    <Col span={10}>
                        <Form.Item
                            label="健康指导"
                            name="health"
                            rules={[{ required: true, message: '请输入健康指导' }]}
                        >
                            <TextArea rows={4} placeholder="请输入" />
                        </Form.Item>
                    </Col>
                    <Col span={24}></Col>
                    <Col span={10}>
                        <Form.Item
                            label="备注"
                            name="remark"
                        >
                            <TextArea rows={4} placeholder="请输入" />
                        </Form.Item>
                    </Col>

                    <Col span={24}></Col>

                    <Form.Item wrapperCol={{ offset: 8, span: 8 }}>
                        <Button type="primary" htmlType="submit">提交审核</Button>
                        <Button onClick={()=>{navigate(-1)}}>返回</Button>
                    </Form.Item>
                </Form>


                <Modal title="选择服务项目" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000} okText="确认" cancelText="取消">
                    <Table columns={columns} dataSource={project} rowKey={(record: any) => record.id} rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }} />
                </Modal>
            </div>


        </div>
    );
}

export default AddServicePack;